<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>首页</title>

    <script src="js/flexible.js"></script>

    <link rel="stylesheet" href="css/flexible.css">

    <link rel="stylesheet" href="css/reset.css">

    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="css/swiper.min.css">

    <link rel="stylesheet" href="css/vant.css">

    <script src="js/swiper.min.js"></script>

    <script src="js/jquery-3.3.1.min.js"></script>

    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    <script src="js/main.js"></script>

    <script src="js/vue/vue.js"></script>

    <script src="js/vue/axios.js"></script>

    <script src="js/vue/MD5.js"></script>

    <script src="js/vue/qs.js"></script>

    <script src="js/vue/vant.js"></script>
    <script src="./qrcode/vue-qrcode.js"></script>

    <style>
        .wrapper {

            display: flex;

            align-items: center;

            justify-content: center;

            height: 100%;

        }

        .showsd {

            position: fixed;

            top: 40%;

            z-index: 2;

            left: 0;

            width: 3.75rem;

        }

        .showsd img {

            margin-left: .1rem;

            width: 3.55rem;

        }

        .van-overlay {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: #fff;

        }

        .moreCoachClass {

            float: right;

        }

        .moreCoachClass a {

            text-decoration: none;

            color: #999999;

            font-size: 12px;

        }

        .card_coach .list span {

            display: inline-block;

            white-space: nowrap;

            width: 100%;

            overflow: hidden;

            text-overflow: ellipsis;

        }
    </style>

</head>

<body>

    <div id="app">

        <div class="banner" style="height: 2.5rem;">


            <div v-if="banner.length > 0" class="swiper-container">

                <div class="swiper-wrapper">

                    <div class="swiper-slide" v-for="item in banner" :key="item.index">

                        <img style="display: inline-block; width: auto; max-height: auto; height: 100%;" :src="item">


                    </div>

                </div>

                <div v-if="banner.length > 1" class="swiper-pagination"></div>
                <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->

            </div>
            <img v-else style="display: inline-block; width: auto; max-height: auto; height: 100%;"
                src="images/bannernpl.jpg" title="馆家" alt="馆家">

        </div>

        <div class="main">

            <!-- <div class="nav">

            <img src="images/toutiao.png" alt="">

            <br>

            <span>馆家头条</span>

        </div>

        <div class="nav">

            <img src="images/fencai.png" alt="">

            <br>

            <span>教练风采</span>

        </div>

        <div class="nav">

            <img src="images/zhaopian.png" alt="">

            <br>

            <span>照片墙</span>

        </div>

        <div class="nav">

            <img src="images/huodong.png" alt="">

            <br>

            <span>优惠活动</span>

        </div> -->



            <div class="clear"></div>



            <div class="msg">

                <img src="images/lb.png"><span>主人，记得准时上课呦~</span>

            </div>



            <!--我预约的课程-->

            <template>

                <div class="ke">

                    <div class="curriculum" v-for="itemKc in orderKc">

                        <div class="title">{{itemKc.Title}}</div>

                        <div><span class="time">{{itemKc.Bstime}}-{{itemKc.Betime}}</span><span
                                class="address">{{itemKc.Space_name}}</span></div>

                        <div class="clear"></div>

                        <div>

                            <div class="coach">

                                <img :src="itemKc.Picurl">

                                <span>{{itemKc.Sname}}</span>

                            </div>

                            <div class="btn">

                                <div class="btn_qx" @click="qxCancel(itemKc.id)">取消预约</div>

                                <div class="btn_qd" @click="sign(itemKc.id)">签到</div>

                            </div>

                            <div class="clear"></div>

                        </div>

                    </div>

                </div>

            </template>



        </div>



        <div class="cc">

            <!--我的会员卡-->

            <template>

                <div class="membercard" v-if="myCard.length>0">

                    <div class="title"><span>我的会员卡</span></div>

                    <div class="list" v-for="item in myCard" :key="item.id">

                        <div class="card">

                            <div class="cd">

                                <div class="name">{{item.Cardname}}</div>

                                <div class="type">{{item.Cardtype}}</div>

                                <div class="clear"></div>

                            </div>

                            <div>

                                <div class="l">状态</div>
                                <div class="r"><span class="zc">{{item.State}}</span></div>

                                <div class="clear jj"></div>

                                <div class="l">余额</div>
                                <div class="r">{{item.Surplus}}</div>

                                <div class="clear jj"></div>

                                <div class="l">有效期</div>
                                <div class="r">{{item.SEtime}}</div>

                                <div class="clear jj"></div>

                                <div class="l">入场</div>
                                <div class="r">{{item.SignCharge}}</div>

                                <div class="clear jj"></div>

                            </div>

                            <div class="code" v-if="item.codesrc!=''" @click="dj(item.Cardnum)">
                                <qrcode :value=item.Cardnum :options="{ width: 150 }"></qrcode>

                                <!-- <img :src="item.codesrc"> -->

                            </div>

                        </div>

                    </div>

                </div>

            </template>

            <van-overlay :show="show" @click="show = false">

            </van-overlay>

            <van-popup v-model="show">
                <qrcode :value=itemCodesrc :options="{ width: 300 }"></qrcode>
            </van-popup>

            <!--本店巨惠卡-->

            <div class="venuercard">

                <div class="title"><span>本店巨惠卡项</span></div>

                <template>

                    <div class="list">

                        <div @click="cardClick(item.id)" class="card" v-for="(item, index) in cardList" :key="item.id"
                            v-if="index < 5">

                            <div class="icon">

                                <img v-if="item.Cardtype=='30'" src="images/card30.png">

                                <img v-else-if="item.Cardtype=='10'" src="images/card10.png">

                                <img v-else src="images/card20.png">

                            </div>

                            <div class="content">

                                <div class="top">{{item.Cardname}}</div>

                                <div class="bottom"><span class="l">巨惠价</span><span class="r">￥{{item.Charge}}</span>
                                </div>

                            </div>

                            <div class="clear"></div>

                        </div>

                    </div>

                </template>

            </div>





            <!-- 新增教练分采 -->

            <div class="mg h10"></div>

            <div class="card_coach">

                <div class="card_title">明星教练</div>

                <div class="moreCoachClass"><a href="coachList.html">更多</a></div>

                <!-- <div class="all">全部教练</div> -->

                <div class="clear h10"></div>

                <div class="list" v-if="index<4" v-for="(item,index) in JL_list" @click="coachListClick(item.id)">

                    <img :src="item.Picurl" onerror="this.src=='images/tx.png'"><br>

                    <span>{{item.Sname}}</span>

                </div>

                <div class="clear"></div>

            </div>



            <!--联系我们-->

            <div class="us">

                <div class="title"><span>联系我们</span></div>

                <template>

                    <div class="list">

                        <div class="card">

                            <div class="pic"><img src="images/gs.png"></div>
                            <div class="name">{{address.Vname}}</div>

                            <div class="clear tt"></div>

                            <div class="addr"><img src="images/address.png"></div>
                            <div class="cont">{{address.Address}}</div>

                            <div class="clear tt"></div>

                            <div class="addr">&nbsp;</div>
                            <div class="cont"><a :href="'tel:' + address.Vtel">{{address.Vtel}}</a></div>

                            <div class="clear tt"></div>

                        </div>

                    </div>

                </template>

            </div>

        </div>

        <div style="height: 0.45rem;"></div>

        <div class="down">

            <div class="nav navActive">

                <a href="index.html">

                    <img src="images/sy_c.png"><br>

                    <span>首页</span>

                </a>

            </div>

            <div class="nav">

                <a href="curriculum_t.html">

                    <img src="images/tk.png"><br>

                    <span>团课</span>

                </a>

            </div>

            <div class="nav">

                <a href="curriculum_p.html">

                    <img src="images/sj.png"><br>

                    <span>私课</span>

                </a>

            </div>

            <div class="nav">

                <a href="shopindex.html">

                    <img src="images/sc.png"><br>

                    <span>商城</span>

                </a>

            </div>

            <div class="nav">

                <a href="my.html">

                    <img src="images/more.png"><br>

                    <span>更多</span>

                </a>

            </div>

            <div style="display: none;">

                <input ref="desc" id="desc" />

                <input ref="descTitle" id="descTitle" />

                <input ref="descImg" id="descImg" />

            </div>

        </div>

    </div>

</body>

<script>
    Vue.component(VueQrcode.name, VueQrcode);

    new Vue({

        el: '#app',

        data: {

            show: false,

            vid: '',

            banner: [],

            cardList: [],

            address: {},

            orderKc: [],

            myCard: [],

            itemCodesrc: '',

            JL_list: []

        },

        async mounted() {

            new Swiper(".swiper-container", { //swiper再mounted中进行初始化

                //具体设置参加swiper官网api，这里是就是把自己随便设置的部分贴上来了

                pagination: {

                    el: ".swiper-pagination"

                },

                loop: true,

                autoplay: {

                    delay: 2000,

                    disableOnInteraction: false

                },

                observeParents: true, //注意这里！！

                observer: true, //也要注意这里！！

            });

        },

        created() {

            this.setCanS()

        },

        methods: {

            dj(itemCodesrc) {

                this.show = true

                this.itemCodesrc = itemCodesrc

            },

            //设置参数

            setCanS() {

                let Request = new Object()

                Request = GetRequest()

                this.vid = Request['vid']

                console.log(this.vid, "sddsdfsdfdsf")

                this.type = Request['type']

                if (this.vid != 'null' && this.vid != undefined && this.vid != '') {

                    sessionStorage.setItem('vid', this.vid)

                } else {

                    this.vid = ''

                }

                this.vid = sessionStorage.getItem('vid')

                let timeLoc = new Date()

                let isBeOverdue = Date.parse(localStorage.getItem('memberTime'))

                if (localStorage.getItem('memberType') == 'logo') {

                    //判断是否保存登录状态

                    //判断vid是否想同

                    let vid = localStorage.getItem('membervid')

                    if (this.vid != vid) {

                        localStorage.removeItem('memberTime')

                        localStorage.removeItem('member')

                        localStorage.removeItem('memberGtoken')

                        localStorage.removeItem('membervid')

                        this.wxShare()

                        this.getToken()

                    } else {

                        //判断是否过期

                        if (timeLoc.getTime() - isBeOverdue > 0) {

                            localStorage.removeItem('memberTime')

                            localStorage.removeItem('member')

                            localStorage.removeItem('memberGtoken')

                            localStorage.removeItem('membervid')

                            this.wxShare()

                            this.getToken()

                        } else {

                            //未过期

                            let vidsdf = localStorage.getItem('membervid')

                            let Gtoken = localStorage.getItem('memberGtoken')

                            sessionStorage.setItem('logo', '0')

                            sessionStorage.setItem('token', Gtoken)

                            sessionStorage.setItem('vid', vidsdf)

                            let type = "logo"

                            sessionStorage.setItem('type', type)

                            this.type = sessionStorage.getItem('type')

                            this.wxShare()

                            this.getBanner()

                            this.getVenue_card()

                            this.getVenue_info()

                            //判断是否登录

                            this.getMy_card()

                            this.getCurriculum()

                            this.getCoachList()

                        }

                    }

                } else {

                    this.wxShare()

                    this.getToken()



                }

            },

            //通过vid获取token

            getToken() {

                const params = {

                    vid: this.vid

                }

                sessionStorage.setItem('logo', '0')

                axios.get('/mobileapi/token.php?act=gettoken', {
                    params: params
                }).then(data => {

                    console.log(data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        window.vant.Toast.fail(msg)

                    } else {

                        sessionStorage.setItem('token', data.data.Gtoken)

                        sessionStorage.setItem('logo', '0')

                        sessionStorage.setItem('type', "logo")

                        this.getBanner()

                        this.getVenue_card()

                        this.getVenue_info()

                        //判断是否登录

                        this.getMy_card()

                        this.getCurriculum()

                        this.getCoachList()



                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },

            //获取banner图列表

            getBanner() {

                getVs()

                sessionStorage.setItem('logo', '0')

                axios.post('/mobileapi/member/index.php?act=banner').then(res => {
                    console.log("banner");


                    let {
                        code,
                        data
                    } = res.data

                    if (code !== 200) {

                        window.vant.Toast.fail(msg)

                    } else {


                        if (data == undefined || !data) {
                            this.banner = [];
                        } else {
                            this.banner = data
                        }

                        console.log("this.banner=data.data");
                        console.log(data);
                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },

            //获取本店教练

            getCoachList() {

                getVs()

                sessionStorage.setItem('logo', '0')

                axios.post('/mobileapi/member/index.php?act=ourcoach').then(data => {

                    console.log(data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        window.vant.Toast.fail(msg)

                    } else {

                        data = data.data

                        this.JL_list = data.data

                        for (let i in this.JL_list) {

                            if (this.JL_list[i].Picurl == '') {

                                this.JL_list[i].Picurl = 'images/tx.png'

                            }

                        }

                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },

            //明细教练的跳转详情

            coachListClick(id) {

                window.location.href = 'coachDetails.html?Sid=' + id + ''

            },



            //获取我预约的课程

            getCurriculum() {

                getVs()

                //sessionStorage.setItem('logo','0')

                axios.post('/mobileapi/member/index.php?act=kecheng').then(data => {

                    console.log(data.data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        window.vant.Toast.fail(msg)

                    } else {

                        data = data.data

                        console.log(this.orderKc)

                        console.log(data.data)

                        this.orderKc = data.data

                        for (let i in this.orderKc) {

                            if (this.orderKc[i].Picurl != null || this.orderKc[i].Picurl != '') {

                                this.orderKc[i].Picurl = "images/xiangce.png"

                            }

                        }

                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },

            //获取我的会员卡

            getMy_card() {

                getVs()

                sessionStorage.setItem('logo', '0')

                axios.post('/mobileapi/member/index.php?act=my_card').then(data => {

                    console.log(data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        window.vant.Toast.fail(msg)

                    } else {

                        data = data.data

                        this.myCard = data.data

                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },

            //  //获取本店会员卡

            getVenue_card() {

                getVs()

                sessionStorage.setItem('logo', '0')

                axios.post('/mobileapi/member/index.php?act=venue_card').then(data => {

                    console.log(data.data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        window.vant.Toast.fail(msg)

                    } else {

                        data = data.data

                        this.cardList = data.data

                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },

            //  //获取联系我们

            getVenue_info() {

                getVs()

                sessionStorage.setItem('logo', '0')

                axios.post('/mobileapi/member/index.php?act=venue_info').then(data => {

                    console.log(data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        window.vant.Toast.fail(msg)

                    } else {

                        data = data.data

                        this.address = data.data

                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },

            // //跳转到会员页面

            cardClick(id) {

                if (sessionStorage.getItem("type") == 'logo') {

                    window.location.href = 'membercard_detail.html?csid=' + id + '&vid=' + sessionStorage
                        .getItem('vid') + ''

                }

            },

            //销售页面

            sale(type) {

                if (type == 'befor') {

                    window.location.href = 'beforSale.html?type=' + type + ''

                } else {

                    window.location.href = 'bsale.html?type=' + type + ''

                }

            },

            //签到

            sign(id) {

                let from = {

                    id: id

                }

                from = JSON.stringify(from)

                let sign = md5(from)

                const params = {

                    from: from,

                    sign: sign

                }

                //console.log(params)

                getVs()

                axios.post('/mobileapi/member/curriculum_t.php?act=YYSign', Qs.stringify(params)).then(data => {

                    console.log(data.data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        window.vant.Toast.fail(data.data.msg);

                    } else {

                        window.vant.Toast.success('签到成功')

                        this.timer = setTimeout(this.getCurriculum, 2000);

                        //this.getlists()

                    }

                }).catch(function (error) {

                    console.log(error);

                });

            },

            //取消预约

            qxCancel(id) {

                let froms = {

                    id: id

                }

                let from = JSON.stringify(froms)

                let sign = md5(from)

                const params = {

                    from: from,

                    sign: sign

                }

                //console.log(params)

                getVs()

                axios.post('/mobileapi/member/curriculum_t.php?act=YYCancel', Qs.stringify(params)).then(
                    data => {

                        console.log(data.data)

                        let {
                            msg,
                            code,
                            user
                        } = data.data

                        if (code !== 200) {

                            window.vant.Toast.fail(data.data.msg);

                        } else {

                            window.vant.Toast.success('预约取消成功')

                            this.timer = setTimeout(this.getCurriculum, 2000);

                            //this.getlists()

                        }

                    }).catch(function (error) {

                    console.log(error);

                });

            },

            //获取分享内容接口

            wxShare() {

                sessionStorage.setItem('logo', '0')

                const params = {

                    vid: sessionStorage.getItem('vid')

                }

                axios.get('/mobileapi/member/wxfx.php?act=get_index_fx', {
                    params: params
                }).then(data => {

                    console.log(data.data)

                    let {
                        msg,
                        code,
                        user
                    } = data.data

                    if (code !== 200) {

                        window.vant.Toast.fail(msg)

                    } else {

                        data = data.data

                        this.$refs.desc.value = data.data.desc

                        this.$refs.descTitle.value = data.data.title

                        this.$refs.descImg.value = data.data.picurl

                    }

                }).catch(function (error) {

                    console.log(error);

                });

            }

        }

    })
</script>

</html>